<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/header.css" rel="stylesheet" />
		<style>
			#btn_send_msg {
				background-color: #1aad19;
			}
			
			#btn_send_msg:active {
				background-color: #128e12;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
			<h1 class="mui-title title-color"><b id="chatting-nickname">用户详情</b></h1>
			<a id="openMenu" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white">···</a>
		</header>

		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="padding-top: 10px;">
					<a href="javascript:;">
						<img id="img_friend_face" class="mui-media-object mui-pull-left" src="" style="line-height: 60px;max-width: 60px;height: 60px;">
						<div class="mui-media-body" style="padding-left: 10px;">
							<label id="lab_friend_alias" style="font-size: 20px;"></label>
							<p id="p_friend_nickname" class="mui-ellipsis" style="font-size: 12px;margin-bottom: -3px;"></p>
							<p id="p_friend_username" class=" mui-ellipsis " style="font-size: 12px;margin-top: 1px;"></p>
						</div>
					</a>
				</li>

			</ul>

			<br />

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a id="friend_signature" href="javascript:;">
						<span id="span_friend_signature" class="mui-pull-right" style="line-height:24px;width:300px;text-align:right;word-break: break-all;color: gray;white-space: normal; font-size: 14px;"></span>
						<div class="mui-media-body" style="margin-top: 3px;">
							个性签名
						</div>
					</a>
				</li>
			</ul>

			<br />

			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a id="link_friend_alias" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" style="color: lightgray;margin-left: 3px;"></span>
						<span id="span_friend_alias" class="mui-pull-right" style="line-height:24px;color: gray;font-size: 14px;"></span>
						<div class="mui-media-body">
							备注
						</div>
					</a>
				</li>

			</ul>
			<br />
			<div style="text-align: center;">
				<button id="btn_send_msg" type="button" class="mui-btn mui-btn-block" style="color: white;width: 90%;display: inline;padding: 12px 0">发消息</button>
			</div>
			<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
				<!-- 可选择菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a id="link_delFriend" href="#" style="color: red;">删除好友</a>
					</li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#sheet"><b>取消</b></a>
					</li>

				</ul>
			</div>
		</div>

		<script src="js/mui.min.js "></script>
		<script src="js/app.js "></script>
		<script type="text/javascript ">
			mui.init({
				swipeBack: true
			});
			mui.plusReady(function() {

				//绑定选择菜单
				var openMenu = document.getElementById("openMenu");
				openMenu.addEventListener("tap", function() {
					mui("#sheet").popover("toggle");
				});

				var userInfo = app.getUserGlobalInfo();
				var friendList = app.getContactList();
				var chattingWebview = plus.webview.currentWebview();
				var friendId = chattingWebview.friendId;
				var userId = userInfo.id;
				var friendInfo = app.getFriendFromContactList(friendId);

				//绑定删除好友的菜单按钮
				var link_delFriend = document.getElementById("link_delFriend");
				link_delFriend.addEventListener("tap", function() {
					mui.confirm('将联系人"' + friendInfo.friendAlias + '"删除，将同时删除与该联系人的聊天记录', '删除联系人', ['删除', '取消'], function(e) {
						if(e.index == 1) {
							mui("#sheet").popover("toggle");
						} else {
							console.log("del");
							mui.get(app.serverUrl + '/user/deleteFriend', {
								userId: userInfo.id,
								friendId: friendId
							}, function(data) {
								if(data.success) {
									app.showToast("删除成功！", "success");
									var myFriendList = data.data;
									app.setContactList(myFriendList);
									mui("#sheet").popover("toggle");
									var weixin_chatlist = plus.webview.getWebviewById("weixin-chatlist.html");
									var weixin_contact = plus.webview.getWebviewById("weixin_contact.html");
									mui.fire(weixin_chatlist, 'deleteFriend', {
										myId: userInfo.id,
										friendId,
										friendId
									});
									mui.fire(weixin_contact, 'refresh', {});
									mui.fire(weixin_chatlist, 'refresh', {});
									mui.back();
								} else {
									mui("#sheet").popover("toggle");
									app.showToast("删除失败！", "error");
								}
							}, 'json');
						}
					});
				});

				//绑定修改备注
				var link_friend_alias = document.getElementById("link_friend_alias");
				link_friend_alias.addEventListener("tap", function() {
					mui.openWindow({
						id: "friendAlias.html",
						url: "friendAlias.html",
						extras: {
							friendId: friendId,
							friendAlias: friendInfo.friendAlias
						}
					});
				});

				var img_friend_face = document.getElementById("img_friend_face");
				var lab_friend_alias = document.getElementById("lab_friend_alias");
				var p_friend_username = document.getElementById("p_friend_username");
				var p_friend_nickname = document.getElementById("p_friend_nickname");
				var span_friend_alias = document.getElementById("span_friend_alias");
				var span_friend_signature = document.getElementById("span_friend_signature ");
				span_friend_alias.innerHTML = friendInfo.friendAlias;
				img_friend_face.src = app.imgServerUrl + friendInfo.friendImg;
				lab_friend_alias.innerHTML = friendInfo.friendAlias;
				p_friend_username.innerHTML = "易信号: " + friendInfo.friendUsername;
				p_friend_nickname.innerHTML = "昵称: " + friendInfo.friendNickname;
				span_friend_signature = friendInfo.friendSignature;

				// 绑定发消息的函数
				var btn_send_msg = document.getElementById("btn_send_msg");
				btn_send_msg.addEventListener("tap", function() {
					var friend = app.getFriendFromContactList(friendId);
					var chatting = plus.webview.getWebviewById("chatting.html");
					mui.openWindow({
						url: "chatting.html",
						id: "chatting-" + friendId,
						extras: {
							friendNickname: friendInfo.friendAlias,
							friendImg: friendInfo.friendImg,
							friendId: friendId
						}
						//							aniShow :"slide-in-right"
					});
				});

				mui.back = function() {
					plus.webview.show('index.html');
				};

				//触发刷新事件
				window.addEventListener("refresh", function(event) {
					refreshFriendInfo(event.detail.friendId);
				});
			});

			function refreshFriendInfo(friendId) {
				var friendInfo = app.getFriendFromContactList(friendId);
				var img_friend_face = document.getElementById("img_friend_face");
				var lab_friend_alias = document.getElementById("lab_friend_alias");
				var p_friend_username = document.getElementById("p_friend_username");
				var p_friend_nickname = document.getElementById("p_friend_nickname");
				var span_friend_alias = document.getElementById("span_friend_alias");
				var span_friend_signature = document.getElementById("span_friend_signature ");
				span_friend_alias.innerHTML = friendInfo.friendAlias;
				img_friend_face.src = app.imgServerUrl + friendInfo.friendImg;
				lab_friend_alias.innerHTML = friendInfo.friendAlias;
				p_friend_username.innerHTML = "易信号: " + friendInfo.friendUsername;
				p_friend_nickname.innerHTML = "昵称: " + friendInfo.friendNickname;
				span_friend_signature = friendInfo.friendSignature;
			}
		</script>
	</body>

</html>